<template>
  <div id="lineEcharts" v-show="lineLoading.lineEcharts" @click.self="lineEchartsChange">
    <div class="line-box">
      <div class="line-box-head">
        <div class="head-left">
          <m-tabs :btnText="btnText" :activeDateBtn="btnActive" @changeBtn="changeBtn"></m-tabs>
        </div>
        <div class="head-right" v-show="btnActive === 1">
          <!--          <span>时间选择 :</span>-->
          <!--          <DatePicker :clearable="false" type="daterange" :value="initDate" @on-change="dateChange"-->
          <!--                      placement="bottom-end" placeholder="请选择日期" style="width: 260px">-->
          <!--          </DatePicker>-->
          <m-date-picker
            :startTime="startTime" @startChange="startChange" @endChange="endChange"
            :endTime="endTime">
          </m-date-picker>
          <Button :loading="lineLoading.btnActiveForm" type="primary" @click="downForm"
                  class="downForm-btn">下载表格
          </Button>
        </div>
      </div>
      <div class="line-box-title">
        <span></span>{{lineTitle.name}}
      </div>
      <div id="lineChart" ref="lineChart" v-show="btnActive === 1"></div>
      <div class="alarmPreset" v-show="btnActive === 2">
        <div class="alarmPreset-top">
          <div class="alarmPreset-list">
            <p>A相预设</p>
            <dl class="list-up">
              <dt>上下限预设</dt>
              <dd>
                <span>温度上限</span> <input v-model.number="alarmPresetList.aUpperLimit" min="10" max="50" type="number">
              </dd>
              <dd>
                <span>温度下限</span> <input v-model.number="alarmPresetList.aLowerLimit" min="10" max="50" type="number">
              </dd>
            </dl>
            <dl class="list-down">
              <dt>超限预设</dt>
              <dd>
                <span>时间范围</span> <input v-model.number="alarmPresetList.aTimeLimit" type="number"> <i>s</i>
              </dd>
              <dd>
                <span>温差上涨</span> <input v-model.number="alarmPresetList.aTemperRise" type="number">
              </dd>
            </dl>
          </div>
          <div class="alarmPreset-list">
            <p>B相预设</p>
            <dl class="list-up">
              <dt>上下限预设</dt>
              <dd>
                <span>温度上限</span> <input v-model.number="alarmPresetList.bUpperLimit" min="10" max="50" type="number">
              </dd>
              <dd>
                <span>温度下限</span> <input v-model.number="alarmPresetList.bLowerLimit" min="10" max="50" type="number">
              </dd>
            </dl>
            <dl class="list-down">
              <dt>超限预设</dt>
              <dd>
                <span>时间范围</span> <input v-model.number="alarmPresetList.bTimeLimit" type="number"> <i>s</i>
              </dd>
              <dd>
                <span>温差上涨</span> <input v-model.number="alarmPresetList.bTemperRise" type="number">
              </dd>
            </dl>
          </div>
          <div class="alarmPreset-list">
            <p>C相预设</p>
            <dl class="list-up">
              <dt>上下限预设</dt>
              <dd>
                <span>温度上限</span> <input v-model.number="alarmPresetList.cUpperLimit" min="10" max="50" type="number">
              </dd>
              <dd>
                <span>温度下限</span> <input v-model.number="alarmPresetList.cLowerLimit" min="10" max="50" type="number">
              </dd>
            </dl>
            <dl class="list-down">
              <dt>超限预设</dt>
              <dd>
                <span>时间范围</span> <input v-model.number="alarmPresetList.cTimeLimit" type="number"> <i>s</i>
              </dd>
              <dd>
                <span>温差上涨</span> <input v-model.number="alarmPresetList.cTemperRise" type="number">
              </dd>
            </dl>
          </div>
        </div>
        <div class="alarmPreset-down">
          <div class="alarmPreset-list">
            <dl>
              <dt>温差预设</dt>
              <dd>
                <span>温差幅度</span> <input v-model.number="alarmPresetList.temperDiffer" type="number">
              </dd>
            </dl>
          </div>
          <div></div>
          <div></div>
          <Button type="primary" :loading="lineLoading.btnSubmit" @click="submitClick" class="down-btn">提 交</Button>
        </div>
      </div>
      <div class="modal-close" @click.stop="maskClose">
      </div>
    </div>
  </div>
</template>

<script>
  import MTabs from './mTabs'
  import MDatePicker from './mDatePicker'

  export default {
    // 组件的名称
    name: 'lineEcharts',
    // props 可以是数组或对象，用于接收来自父组件的数据
    props: {
      // 弹窗是否显示 以及 提交按钮和下载表格的 loading
      lineLoading: {
        type: Object,
        default: () => {
          return {
            lineEcharts: false,
            btnActiveForm: false,
            btnSubmit: false
          }
        }
      },
      // 表格的 lineTitle
      lineTitle: {
        type: Object,
        default: () => {
          return {
            id: null,
            name: '',
            status: 2,
            itemData: []
          }
        }
      },
      // 温度走势,报警预设 的 按钮
      btnText: {
        type: Array,
        default: () => {
          return []
        }
      },
      // 温度走势,报警预设 被选中的激活项
      btnActive: {
        type: Number,
        default: 1
      },
      // 时间选择的
      // initDate: {
      //   type: Array,
      //   default: () => {
      //     return []
      //   }
      // },
      startTime: {
        type: String,
        default: ''
      },
      endTime: {
        type: String,
        default: ''
      },
      // 报警预设的 提交的 输入框的
      alarmPresetList: {
        type: Object,
        default: () => {
          return {}
        }
      }
    },
    // 数据绑定
    data () {
      return {}
    },
    // 组件
    components: {MDatePicker, MTabs},
    // 注意，不应该使用箭头函数来定义 methods函数 或者  computed函数 (例如 aDouble: () => this.a * 2)。
    // 理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.a 将是 undefined
    // 方法
    methods: {
      // 提交
      submitClick () {
        this.$emit('submitClick')
      },
      lineEchartsChange () {
        this.$emit('lineEchartsChange')
      },
      maskClose () {
        this.$emit('maskClose')
      },
      changeBtn (val) {
        this.$emit('changeBtn', val)
      },
      // 日期改变的 方法
      // dateChange (val) {
      //   this.$emit('dateChange', val)
      // },
      startChange (val) {
        this.$emit('startChange', val)
      },
      endChange (val) {
        this.$emit('endChange', val)
      },
      // 下载表格
      downForm () {
        this.$emit('downForm')
      }
    },
    // 计算属性
    computed: {},
    // 监听
    watch: {
      // 监听路由变化
    },
    // 常用钩子函数，总共有8个，可以参照vue的生命周期看
    // 完成了 data 数据的初始化，el没有，就是说页面的dom没有完成转化，还是 {{data}} 这种
    created () {
    },
    // 完成挂载，相当于dom ready
    mounted () {
    },
    // 销毁，可以做一些定时器的销毁,缓存的清除等操作
    destroyed () {
    }
  }
</script>

<style lang="scss">
  #lineEcharts {
    @include modalFixed;
    z-index: 5;

    .line-box {
      width: 95%;
      min-height: 908px;
      height: 84%;
      background-color: rgba(20, 38, 89, 1);
      color: $font-f;
      padding: 60px 50px;
      display: flex;
      flex-direction: column;
      position: relative;

      .modal-close {
        position: absolute;
        top: -20px;
        right: -20px;
        z-index: 99999;
        width: 44px;
        height: 44px;
        background: url('../../assets/electrImg/modal_close.png') no-repeat;

        &:hover {
          cursor: pointer;
        }
      }

      .line-box-head {
        display: flex;
        height: 40px;
        line-height: 40px;

        .head-left, .head-right {
          flex: 1;
        }

        .head-right {
          font-size: 14px;
          text-align: right;
          font-weight: 400;

          > span {
            margin-right: 10px;
          }

          .ivu-input {
            background: #0c183e;
            color: #fff;
            border-radius: 0px;
            font-size: 14px;
            border: 0;
            height: 40px;
            line-height: 40px;
          }

          .ivu-input-prefix i, .ivu-input-suffix i {
            font-size: 22px;
            line-height: 38px;
            color: $font-f;
          }

          /*.ivu-date-picker .ivu-select-dropdown {*/
          /*  background-color: #4C90FD;*/
          /*}*/

          .downForm-btn {
            margin-left: 30px;
            height: 40px;
            font-size: 14px;
            width: 110px;
          }
        }

        .margin-right {
          display: inline-block;
          width: 110px;
          height: 40px;
          font-size: 14px;
          margin-right: 10px;
        }
      }

      .line-box-title {
        font-size: $font-24;
        padding: 40px 0 20px 0;

        span {
          display: inline-block;
          width: 4px;
          height: 24px;
          background-color: rgba(67, 204, 186, 1);
          margin: 0 25px 6px 0;
          vertical-align: bottom;
        }
      }

      #lineChart {
        /*min-height: 642px;*/
        width: 100%;
        flex: 1;
      }

      .alarmPreset {
        padding: 40px 200px 0 200px;
        width: 100%;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;

        .alarmPreset-top {
          height: 68%;
          display: flex;
          justify-content: center;
          text-align: center;
          @media screen and (min-width: 1921px) {
            height: 52%;
          }
          /*align-items: center;*/
          > div {
            flex: 1;
          }
        }

        .alarmPreset-list {
          p {
            font-size: 20px;
            padding-bottom: 60px;
          }

          dl {
            font-size: 16px;
            color: $font-f;
            text-align: left;
            width: 60%;
            margin: 0 auto;

            dt {
              margin-bottom: 30px;
              color: rgba(76, 144, 253, 1);
            }

            dd {
              margin-bottom: 30px;

              span {
                margin-right: 10px;
              }

              input {
                width: 160px;
                background: none;
                border: none;
                border-bottom: 1px solid #8C99B2;
                border-radius: 0;
                text-align: center;
                color: $font-f;
              }
            }
          }
        }

        .alarmPreset-down {
          height: 32%;
          margin-top: 10px;
          padding-top: 30px;
          border-top: 1px dashed rgba(34, 55, 115, 1);
          display: flex;
          position: relative;

          div {
            flex: 1;
          }

          .down-btn {
            position: absolute;
            bottom: 0px;
            left: 6.5%;
            width: 110px;
            font-size: 18px;
            height: 40px;
          }
        }
      }
    }
  }
</style>
